<template>
  <div class="popular-creator">
    <component :is="isDesktop ? Desktop : Mobile" />
  </div>
</template>
<script setup>
import { onActivated } from 'vue'
import { useAppStore } from '@/store/app'
import { useHeadStore } from '@/store/head'
import asyncCompWithLoading from '@/utils/async-comp-with-loading'

const Desktop = asyncCompWithLoading(() => import('./Desktop.vue'))
const Mobile = asyncCompWithLoading(() => import('./Mobile.vue'))

const { isDesktop } = useAppStore()

const { toPopularCreatorHead } = useHeadStore()
onActivated(toPopularCreatorHead)
</script>
<style scoped lang="scss">
.popular-creator {
  width: 100%;
  height: 100%;
}
</style>
